<template>
  <div class="cropper-container">
    <div class="cropper-wrap">
      <div class="title">
        剪裁封面
      </div>
      <div class="cropper">
        <vueCropper
          ref="cropper"
          :img="image"
          :output-size="option.size"
          :output-type="option.outputType"
          :full="option.full"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :info-true="option.infoTrue"
          :enlarge="option.enlarge"
        />
      </div>
      <div>
        <!--<el-button-group>-->
        <!--<el-button type="primary" size="mini" @click="left">左转90°</el-button>-->
        <!--<el-button type="primary" size="mini" @click="right">右转90°</el-button>-->
        <!--</el-button-group>-->
      </div>

      <div>
        可选择一个尺寸的封面单独剪裁
        <div class="btn-scale">
          <el-button-group>
            <el-button size="mini" @click="handleChangeCropTwo">2.35:1</el-button>
            <el-button size="mini" style="width:66px;" @click="handleChangeCropOne">1:1</el-button>
          </el-button-group>
        </div>
        <el-button type="primary" size="mini" @click="upload(scale)">确定</el-button>
      </div>
      <div/>
    </div>
    <div class="preview">
      <div class="title">封面预览</div>
      <!--<div>-->
      <!--<div>-->
      <!--<div-->
      <!--:style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',-->
      <!--'margin': '5px'}"-->
      <!--class="show-preview">-->
      <!--<div :style="previews.div">-->
      <!--<img :src="previews.url" :style="previews.img">-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="preview-picture">
        <div class="picture-container">
          <div class="picture-wrap2">
            <img :src="previewImg.img2" width="100%" class="img-2" alt="2.35:1">
          </div>
          图文封面(2.35:1)
        </div>
        <div class="picture-container">
          <div class="picture-wrap1">
            <img :src="previewImg.img1" width="100%" class="img-1" alt="1:1">
          </div>
          转发封面(1:1)
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { VueCropper } from 'vue-cropper'
import { uploadOneFile } from '@/api/upload'

export default {
  components: {
    VueCropper
  },
  props: {
    image: {
      type: [String, Blob, null, File],
      default: ''
    }
  },
  data() {
    return {
      option: {
        size: 1,
        enlarge: 2,
        outputType: 'jpg',
        mode: 'contain',
        fixed: true,
        autoCrop: true,
        autoCropWidth: '235px',
        autoCropHeight: '100px',
        fixedBox: true,
        centerBox: true,
        original: false,
        info: true,
        infoTrue: false
      },
      scale: 2,
      previews: {},
      previewImg: {
        img1: '',
        img2: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    handleChangeCropOne() {
      this.option.autoCropWidth = '150px'
      this.option.autoCropHeight = '150px'
      this.scale = 1
    },
    handleChangeCropTwo() {
      this.option.autoCropWidth = '235px'
      this.option.autoCropHeight = '100px'
      this.scale = 2
    },
    // base64传输图片
    // upload() {
    //   this.$refs.cropper.getCropData((data) => {
    //     console.log(data)
    //     base64ImageUpload(data).then(res => {
    //       console.log(res)
    //       if (this.scale === 1) {
    //         this.previewImg.img1 = res.data.url
    //         this.$emit('previewImg', this.previewImg)
    //       } else if (this.scale === 2) {
    //         this.previewImg.img2 = res.data.url
    //         this.$emit('previewImg', this.previewImg)
    //       }
    //     })
    //   })
    // },
    // 二进制传输图片
    upload() {
      this.$refs.cropper.getCropBlob((data) => {
        console.log(data)
        var formdata = new FormData()
        formdata.append('upfile', data, 'image')
        console.log('file', formdata.get('upfile'))
        uploadOneFile(formdata).then(res => {
          console.log(res)
          if (this.scale === 1) {
            this.previewImg.img1 = res.data.url
            this.$emit('previewImg', this.previewImg)
          } else if (this.scale === 2) {
            this.previewImg.img2 = res.data.url
            this.$emit('previewImg', this.previewImg)
          }
        })
      })
    },
    left() {
      this.$refs.cropper.rotateLeft()
    },
    right() {
      this.$refs.cropper.rotateRight()
    },
    realTime(data) {
      console.log('realTime', data)
      this.previews = data
    }
  }
}

</script>
<style rel="stylesheet" lang="scss" scoped>
  .vue-cropper {
    min-height: 200px;
    width: 300px;
  }

  .cropper-container {
    height: 400px;
    background-color: white;
    display: flex;
  }

  .cropper-wrap {
    .title {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 21px;
    }
    .cropper {
      width: 310px;
      background: rgba(242, 242, 242, 1);
      border: 1px solid rgba(228, 228, 228, 1);
      padding: 16px 5px;
      margin-bottom: 37px;
    }
    .btn-scale {
      margin: 15px 0;
    }
  }

  .preview {
    margin-left: 36px;
    border-left: 1px solid rgba(228, 228, 228, 1);
    padding-left: 27px;
    .title {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(51, 51, 51, 1);
    }
    .picture-container {
      display: flex;
      margin-top: 20px;
    }
    .picture-wrap2 {
      width: 130px;
      height: 55px;
    }
    .picture-wrap1 {
      width: 130px;
      height: 129px;
    }
  }
</style>
